import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { EntityMap } from "@/components/entity/entity-map";
import { JsonLd } from "@/components/entity/json-ld";
import { ExtLink, KeyValueList } from "@/components/entity/kv";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { FacilityTable } from "@/components/facility-table";
import { ApiNote, HonestEmpty, ShareList } from "@/components/intelligence/shared";
import { StatusBadge } from "@/components/ui/badge";
import { Page, Section } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import { SourceHistory } from "@/components/ui/timeline";
import { api } from "@/lib/api";
import { countryName, fmtInt, placeLine, pluralize } from "@/lib/format";
import { routes } from "@/lib/routes";
import { NOT_FOUND_METADATA, absoluteUrl, compactJsonLd, pageMetadata } from "@/lib/seo";
import { countryHrefMap } from "../../cloud-regions/cloud-format";

export const revalidate = 300;

type Params = Promise<{ slug: string }>;

function describe(d: { name: string; nameLong: string | null; city: string | null; countryIso2: string | null; networkCount: number | null; facilityCount: number; operators?: unknown[] }): string {
  const place = [d.city, d.countryIso2 ? countryName(d.countryIso2) : null].filter(Boolean).join(", ");
  const parts = [`${d.name}${d.nameLong && d.nameLong !== d.name ? ` (${d.nameLong})` : ""} — internet exchange point${place ? ` in ${place}` : ""}`];
  if (d.networkCount !== null) parts.push(`${fmtInt(d.networkCount)} connected networks`);
  parts.push(`present in ${fmtInt(d.facilityCount)} indexed ${d.facilityCount === 1 ? "facility" : "facilities"}`);
  if (d.operators?.length) parts.push(`${fmtInt(d.operators.length)} operators`);
  return `${parts.join(", ")}. Facilities, operators, nearby infrastructure and sources.`;
}

/** External identifier → public URL when the registry is known. */
function idHref(key: string, value: string | number): string | null {
  const k = key.toLowerCase();
  if (k.includes("peeringdb")) return `https://www.peeringdb.com/ix/${value}`;
  if (k === "wikidata") return `https://www.wikidata.org/wiki/${value}`;
  if (typeof value === "string" && /^https?:\/\//.test(value)) return value;
  return null;
}

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { slug } = await params;
  const r = await api.ixp(slug);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Internet exchange" };
  return pageMetadata({ title: r.data.name, description: describe(r.data), path: routes.ixp(r.data.slug) });
}

export default async function IxpPage({ params }: { params: Params }) {
  const { slug } = await params;
  const [r, countryHref] = await Promise.all([api.ixp(slug), countryHrefMap()]);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <Breadcrumbs items={[{ name: "Internet exchanges", href: routes.ixps() }, { name: slug, href: routes.ixp(slug) }]} className="mb-4" />
        <OfflineNotice detail={r.error} />
      </Page>
    );
  }
  const d = r.data;
  const cName = d.countryName ?? (d.countryIso2 ? countryName(d.countryIso2) : null);
  const cHref = countryHref(d.countryIso2);
  const ids = Object.entries(d.externalIds ?? {});
  const facilities = d.facilities ?? [];
  const operators = [...(d.operators ?? [])].sort((a, b) => b.facilityCount - a.facilityCount);
  const opTotal = operators.reduce((a, o) => a + o.facilityCount, 0) || 1;
  const nearby = d.nearbyFacilities ?? [];
  const hasGeo = typeof d.lat === "number" && typeof d.lng === "number";
  const history = d.sourceHistory ?? [];

  const jsonLd = compactJsonLd({
    "@context": "https://schema.org",
    "@type": "Organization",
    name: d.name,
    alternateName: d.nameLong && d.nameLong !== d.name ? d.nameLong : undefined,
    url: absoluteUrl(routes.ixp(d.slug)),
    sameAs: [d.website, ...ids.map(([k, v]) => idHref(k, v))].filter((x): x is string => !!x),
    description: describe(d),
    address: d.city || cName ? compactJsonLd({ "@type": "PostalAddress", addressLocality: d.city, addressCountry: d.countryIso2 }) : undefined,
  });

  const sections = [
    { id: "location", label: "Location" },
    { id: "facilities", label: "Facilities", count: facilities.length },
    { id: "operators", label: "Operators", count: operators.length },
    { id: "nearby", label: "Nearby infrastructure" },
    { id: "identifiers", label: "Identifiers", count: ids.length },
    { id: "history", label: "Source history", count: history.length },
  ];

  return (
    <Page>
      <JsonLd data={jsonLd} />
      <Breadcrumbs items={[{ name: "Internet exchanges", href: routes.ixps() }, { name: d.name, href: routes.ixp(d.slug) }]} className="pt-4" />

      <header className="py-4 sm:py-6">
        <div className="label-caps mb-1.5">Internet exchange</div>
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">{d.name}</h1>
        {d.nameLong && d.nameLong !== d.name && <p className="mt-1 text-[14px] text-ink-2">{d.nameLong}</p>}
        <p className="mt-2 flex flex-wrap items-center gap-x-1.5 text-[13px] text-ink-2">
          {d.countryIso2 && <CountryFlag iso2={d.countryIso2} size={13} />}
          {d.city && <span>{d.city}</span>}
          {cName && (
            <>
              {d.city && <span className="text-ink-4">·</span>}
              {cHref ? (
                <Link href={cHref} className="hover:text-ink hover:underline">
                  {cName}
                </Link>
              ) : (
                <span>{cName}</span>
              )}
            </>
          )}
          {d.metro && (
            <>
              <span className="text-ink-4">·</span>
              <Link href={routes.market(d.metro.slug)} className="hover:text-ink hover:underline">
                {d.metro.name} market
              </Link>
            </>
          )}
          {d.website && (
            <>
              <span className="text-ink-4">·</span>
              <ExtLink href={d.website} className="text-ink-2" />
            </>
          )}
        </p>
      </header>

      <MetricRow cols={4}>
        <MetricCell>
          <Metric value={d.networkCount === null ? "—" : fmtInt(d.networkCount)} label="Participants (networks)" note={d.networkCount === null ? "not published by the sources indexed" : "as published by the source"} />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(d.facilityCount)} label="Facilities" note="indexed data centers with this exchange present" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(operators.length)} label="Operators" note={operators.length ? "operating those facilities" : "no facility linked yet"} />
        </MetricCell>
        <MetricCell>
          <Metric value={d.regionContinent ?? cName ?? "—"} label={d.regionContinent ? "Region" : "Country"} />
        </MetricCell>
      </MetricRow>

      <SectionNav items={sections} className="mt-4" />

      <div className="mt-6 flex flex-col gap-8">
        <Section id="location" title="Location" description={hasGeo ? "Reference point of the exchange (metro reference when the exchange publishes no coordinates)." : "The exchange publishes no coordinates of its own."} className="scroll-mt-28">
          {hasGeo ? <EntityMap center={{ lat: d.lat as number, lng: d.lng as number }} zoom={9} filters={d.countryIso2 ? { country: d.countryIso2 } : undefined} precision="metro" openLabel={`Open ${d.name} in map`} className="h-[220px] sm:h-[320px]" /> : <HonestEmpty title="No coordinates" detail={d.metro ? <>the exchange is placed in the <Link href={routes.market(d.metro.slug)} className="underline decoration-hair-2 hover:text-ink">{d.metro.name}</Link> market on maps</> : "no metro reference either — the exchange is listed but not mapped"} />}
          <div className="mt-3">
            <KeyValueList
              items={[
                { label: "City", value: d.city },
                { label: "Country", value: cName ? (cHref ? <Link href={cHref} className="hover:text-accent hover:underline">{cName}</Link> : cName) : null },
                { label: "Market", value: d.metro ? <Link href={routes.market(d.metro.slug)} className="hover:text-accent hover:underline">{d.metro.name}</Link> : null },
                { label: "Website", value: d.website ? <ExtLink href={d.website} /> : null },
              ]}
              columns={2}
            />
          </div>
          <ApiNote note={d.trafficNote} label="Traffic & location" className="mt-3" />
        </Section>

        <Section id="facilities" title="Facilities where this exchange is present" description={facilities.length ? `${fmtInt(facilities.length)} indexed ${pluralize(facilities.length, "facility", "facilities")}` : undefined} className="scroll-mt-28">
          {facilities.length ? <FacilityTable items={facilities} columns={["operator", "market", "country", "status", "mw"]} /> : <HonestEmpty title="No facility linked yet" detail="facility presence comes from the exchange's published facility list or from facility pages; it appears as soon as it is observed" />}
        </Section>

        <Section id="operators" title="Operators present" description="Operators of the facilities where the exchange is reachable, by number of facilities." className="scroll-mt-28">
          {operators.length ? <ShareList items={operators.slice(0, 20).map((o) => ({ key: o.id, label: o.name, href: routes.operator(o.slug), count: o.facilityCount, share: o.facilityCount / opTotal }))} /> : <HonestEmpty title="No operator known" detail="operators appear once a linked facility carries one" />}
        </Section>

        <Section id="nearby" title="Nearby infrastructure" description="Indexed facilities around the exchange's reference point, by distance." className="scroll-mt-28">
          {nearby.length ? (
            <Table dense mobileCollapse={{ total: nearby.length, label: "facilities" }}>
              <THead>
                <tr>
                  <Th>Facility</Th>
                  <Th className="hidden sm:table-cell">Operator</Th>
                  <Th className="hidden md:table-cell">Place</Th>
                  <Th>Status</Th>
                  <Th numeric>Distance</Th>
                </tr>
              </THead>
              <TBody>
                {nearby.map((f) => (
                  <Tr key={f.id}>
                    <Td primary>
                      <RowLink href={routes.facility(f.slug)}>{f.name}</RowLink>
                      <div className="text-[11.5px] text-ink-3 sm:hidden">{f.operator?.name ?? "Operator unknown"}</div>
                    </Td>
                    <Td label="Operator" className="hidden sm:table-cell">
                      {f.operator ? (
                        <Link href={routes.operator(f.operator.slug)} className="text-ink-2 hover:text-ink hover:underline">
                          {f.operator.name}
                        </Link>
                      ) : (
                        <span className="text-ink-4">—</span>
                      )}
                    </Td>
                    <Td label="Place" className="hidden text-ink-3 md:table-cell">
                      {placeLine(f)}
                    </Td>
                    <Td label="Status">
                      <StatusBadge status={f.status} short size="xs" />
                    </Td>
                    <Td label="Distance" numeric lead>
                      {f.distanceKm < 1 ? `${Math.round(f.distanceKm * 1000)} m` : `${f.distanceKm.toFixed(1)} km`}
                    </Td>
                  </Tr>
                ))}
              </TBody>
            </Table>
          ) : (
            <HonestEmpty title={hasGeo ? "No other indexed facility nearby" : "Not computed"} detail={hasGeo ? "within the search radius" : "the exchange has no coordinates, so distances cannot be measured"} />
          )}
        </Section>

        <Section id="identifiers" title="Identifiers" description="External registry identifiers as observed." className="scroll-mt-28">
          {ids.length ? (
            <KeyValueList
              items={ids.map(([k, v]) => {
                const href = idHref(k, v);
                return { label: k.replace(/_/g, " "), value: href ? <ExtLink href={href}>{String(v)}</ExtLink> : <span className="figure text-[12.5px]">{String(v)}</span> };
              })}
              columns={2}
            />
          ) : (
            <HonestEmpty title="No external identifier recorded" />
          )}
        </Section>

        <Section id="history" title="Source history" description="Observations that shaped this record." className="scroll-mt-28">
          {history.length ? <SourceHistory items={history.slice(0, 40)} /> : <HonestEmpty title="No source history yet" />}
        </Section>
      </div>

      <SourcesFooter sources={r.sources} updatedAt={d.updatedAt} note="Exchange facts are shown as published by PeeringDB and the exchange operator; participant counts are never estimated and coordinates are metro reference points unless the exchange publishes its own." />
    </Page>
  );
}